<template>
  <div id="app">
    <ConnectWallet
      :isConnect="isConnect"
      @isConnectWallet="isConnectWallet"
    ></ConnectWallet>
    <div class="nav">
     
      <div class="nav_page">
        <div class="imgCon">
          <span  class="logo_c" @click="location('https://chipsvip.com/')">
            <img src="@/assets/img/logo.png" class="navImg" alt="" />
            <h1>CHIPS</h1>
          </span>
          <!-- <router-link to="/index" class="conI"> Home </router-link> -->
          <!-- <router-link to="/portfolio" class="conI"> Telegram </router-link> -->
        </div>

        <div class="connectW">
          <div class="connect" v-if="currentAccount">
            <span class="myAccount">{{ currentAccount }}</span>
            <img src="@/assets/img/connect.png" alt="" @click="closeConnect" />
            <div class="addressContent" v-if="isAddress">
              <h3>Address</h3>
              <span class="add">{{ currentAccount }}</span>
              <span
                class="copy"
                :data-clipboard-text="currentAccount"
                @click="copy"
              >
                Copy Address
              </span>
              <el-button class="disConnect" @click="cancleConnect"
                >Disconnect Wallet</el-button
              >
            </div>
          </div>
          <span v-else class="connect_an" @click="isConnectWallet">Connect</span>
        </div>
      </div>
    </div>
    <router-view />
    <!-- <div class="footerW">
      <div class="w">
        <div>1111</div>
      </div>
      <span style="color: '#FFFFFF'; margin-top: 15px"
        >Copyright ©2021 JBFCAP Ltd All Rights Reserved</span
      >
    </div> -->
  </div>
</template>

<script>
import web3 from "web3";
import Clipboard from 'clipboard'
import { mapState, mapActions } from "vuex"
import { Approve } from "@/web3/index"
import ConnectWallet from "@/components/connectWallet.vue"; //链接钱包

export default {
  name: "App",
  components: {
    ConnectWallet
  },
  data () {
    return {
      en: "en",
      cn: "cn",
      isconnect: false,
      isAddress: false,
      isConnect: false,//matemask钱包显示
    };
  },
  watch: {},
  async mounted () {
    Approve()
    window.ethereum.on('chainChanged', function () { //网络更改
      location.reload()
    })
    window.ethereum.on('accountsChanged', (res) => { //当网络断开  
      if (res.length == 0) {
        this.$store.commit("setAccount", '');
      } else {
        this.$store.commit("setAccount", res[0]);
      }
    })
  },
  computed: {
    ...mapState({
      currentAccount: state => state.account
    })
  },
  methods: {
    ...mapActions(['setAccount']),
    copy () {
      let clipboard = new Clipboard('.copy')
      clipboard.on('success', e => {
        this.$message({
          type: 'success',
          message: 'Copy successfully'
        })
        clipboard.destroy()
      })
    },
    closeConnect () {
      this.isAddress = !this.isAddress;
    },
    async connectBsc () { //链接bsc
      let ethereum = window.ethereum;
      const data = [{
        chainId: web3.utils.numberToHex(56),
        chainName: 'Binance Smart Chain',
        nativeCurrency:
        {
          name: 'BNB',
          symbol: 'BNB',
          decimals: 18
        },
        rpcUrls: ['https://bsc-dataseed.binance.org/'],
        blockExplorerUrls: ['https://bscscan.com/'],
      }]

      let tx = await ethereum.request({
        method: "wallet_addEthereumChain",
        params: data,
      })
        .then((success) => {
          if (success) {
            console.log("FOO successfully added to wallet!");
          } else {
            throw new Error("Something went wrong.");
          }
        })
        .catch(function (err) {
          console.log(err)
        });
      if (tx) {
        console.log(tx)
      }
    },
    connectWallet () {
      Approve()
    },
    cancleConnect () {
      this.setAccount('')
    },
    isConnectWallet () {//链接钱包
      this.isConnect = !this.isConnect;
    },
    // isShowAddress () { //显示地址
    //   this.isAddress = !this.isAddress;
    // },
    location(url){
      window.location.href=url
    }
  },
};
</script>

<style scoped lang="scss">
* {
  box-sizing: border-box;
}
p {
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
}
a {
  text-decoration: none;
}
.model {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  opacity: 0;
  z-index: 0;
}

@media screen and (min-width: 1200px) {
  .app {
    display: none;
  }
  .nav {
    display: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: fixed;
    top: 0px;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgb(58, 25, 72);
    .nav_page {
      width: 95%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 70px;
      align-items: center;
      .imgCon {
        display: flex;
        align-items: center;
        .conI {
          margin: 0 10px;
          color: #fff;
          width: 80px;
          font-weight: 600;
        }
        .logo_c {
          display: flex;
          align-items: center;
          color: #fff;
          cursor: pointer;
        }
        .navImg {
          width: 50px;
          margin-right: 20px;
          cursor: pointer;
        }
      }
      .connect,
      .connect_an {
        position: relative;
        width: 185px;
        height: 42px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(255, 255, 255, 0.2);
        border: none;
        color: #fff;
        border-radius: 6px;
        .myAccount {
          overflow: hidden; /*超出的部分隐藏起来。*/
          white-space: nowrap; /*不显示的地方用省略号...代替*/
          text-overflow: ellipsis; /* 支持 IE */
          width: 100px;
        }
        img {
          width: 30px;
          margin-left: 20px;
        }
        .addressContent {
          position: absolute;
          top: 60px;
          display: flex;
          flex-direction: column;
          box-sizing: border-box;
          padding: 30px;
          width: 300px;
          height: 250px;
          background: #ffffff;
          box-shadow: 0px 12px 44px 0px rgba(75, 75, 75, 0.22);
          border-radius: 20px;
          align-items: flex-start;
          h3 {
            color: #000;
          }
          .add {
            word-wrap: break-word;
            width: 100%;
            text-align: left;
            color: #ccc;
            font-size: 14px;
            margin: 20px 0 25px 0;
          }
          .copy {
            height: 45px;
            color: #808080;
            background-color: #f7f8fc;
            line-height: 45px;
            border-radius: 8px;
            text-align: center;
            width: 100%;
            cursor: pointer;
          }
          .disConnect {
            color: #c13d54;
            background: rgba(193, 61, 84, 0.2);
            border-radius: 12px;
            height: 24px;
            font-size: 12px;
            line-height: 0;
            margin-left: 45px;
            margin-top: 12px;
          }
        }
      }
    }
  }

  .footerW {
    width: 100%;
    background: #030d1b;
    color: #fff;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    div {
      cursor: pointer;
      font-size: 14px;
    }
    .w {
      display: flex;
      align-items: center;
      div {
        margin: 0 10px;
      }
    }

    .bottom {
      width: 100%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        margin: 30px;
        width: 35px;
        height: 35px;
      }
    }
  }
}
// /deep/ .el-dialog__header{
//   padding: 0 !important;
// }
// /deep/ .el-dialog__body{
//   padding: 0 !important;

// }
// /deep/ .el-dialog{
//   position: absolute;
//   right: 0;
// }
@media screen and (min-width: 360px) and (max-width: 1000px) {
  .nav {
    display: none;
  }
  .footerW {
    display: none;
  }
  .app {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 0 20px;
    height: 60px;
    background: #fff;
    z-index: 1000;
    .logoW {
      width: 33.3%;
      text-align: center;
    }
    .iconW {
      width: 33.3%;
      text-align: left;
    }
    .appRi {
      border-top: 2px solid #333;
      border-bottom: 2px solid #333;
    }
    img {
      width: 100px;
    }
    .icFe {
      color: #333;
      width: 30px;
      height: 20px;
    }
  }
  .topBox {
    padding: 30px;
    p {
      text-align: left;
      padding: 8px 0;
      a {
        color: #fff;
        font-size: 13px;
      }
    }
    .activeApp {
      color: #c7000b !important;
    }
    .select {
      .top {
        display: flex;
        align-items: center;
        .el-icon-arrow-down {
          margin-left: 20px;
        }
      }
      .selectCon {
        padding: 10px;
        a {
          color: #333;
        }
      }
    }
  }
  .footerW {
    width: 100%;
    background: #030d1b;
    position: fixed;
    bottom: 0;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    color: #fff;
    .bottom {
      width: 100%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        margin: 10px 30px;
        width: 30px;
        height: 30px;
      }
    }
  }
}

#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
<style >
.el-menu--popup-bottom-start {
  background: #fff !important;
}
.el-menu--popup-bottom-start a {
  color: #004767 !important;
}

.el-menu-item {
  background: #fff !important;
  color: #333 !important;
}
.el-menu--popup-bottom-start .is-active span {
  color: #333 !important;
}
body {
  padding: 0 !important;
}
</style>
